JavaScript 30 #02 - JS and CSS Clock - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2019 iT 邦幫忙鐵人賽

DAY 2

Modern Web

JavaScript 30系列第 2 篇

JavaScript 30 #02 - JS and CSS Clock

2019鐵人賽

dan2y006

2018-10-17 23:42:40

1128 瀏覽

分享至

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>JS + CSS Clock</title>
</head>

<body>


    <div class="clock">
        <div class="clock-face">
            <div class="hand hour-hand"></div>
            <div class="hand min-hand"></div>
            <div class="hand second-hand"></div>
        </div>
    </div>


    <style>
        html {
            background: #018DED url(http://unsplash.it/1500/1000?image=881&blur=50);
            background-size: cover;
            font-family: 'helvetica neue';
            text-align: center;
            font-size: 10px;
        }
        
        body {
            margin: 0;
            font-size: 2rem;
            display: flex;
            flex: 1;
            min-height: 100vh;
            align-items: center;
        }
        
        .clock {
            width: 30rem;
            height: 30rem;
            border: 20px solid white;
            border-radius: 50%;
            margin: 50px auto;
            position: relative;
            padding: 2rem;
            box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1), inset 0 0 0 3px #EFEFEF,
                            inset 0 0 10px black, 0 0 10px rgba(0, 0, 0, 0.2);
        }
        
        .clock-face {
            position: relative;
            width: 100%;
            height: 100%;
            transform: translateY(-3px);
            /* account for the height of the clock hands */
        }
        /*指針的class*/
        
        .hand {
            width: 50%;
            height: 6px;
            background: black;
            position: absolute;
            top: 50%;
            /*指針註冊點*/
            transform-origin: right;
            /*旋轉角*/
            transform: rotate(90deg);
            /*動畫*/
            transition: all 0.05s;
            transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1)
        }
        
        .hour-hand {
            width: 50%;
            background-color: red;
            height: 10px;
        }
        
        .min-hand {
            background-color: darkgreen;
        }
        
        .second-hand {
            height: 2px;
        }
    </style>

    <script>
        //學習重點:
        //1.時間讀取(js Date 物件)
        //找出時間 js Date
        //建立時間與指針的關係
        //2.css style
        //3.計時器
        //setInterval;setTimeOut
        //4.封裝:ES6 或 立即函式
        (function() {

            /*原本用getElementsByClassName(className)[index]*/
            //var secondHand = document.getElementsByClassName("second-hand")[0];
            /*後來改querySelector更像JQuery更方便*/
            var secondHand = document.querySelector(".second-hand");
            var minHand = document.querySelector(".min-hand");
            var hourHand = document.querySelector(".hour-hand");

            function getTime() {
                const now = new Date();
                const hour = now.getHours();
                const min = now.getMinutes();
                const sec = now.getSeconds();
                console.log(`${hour}:${min}:${sec}`);

                const hourDegrees= `rotate(${90+(360/60)*sec}deg)`;
                secondHand.style.transform =hourDegrees;
                 const minDegrees=`rotate(${90+(360/60)*min+(6/60)*sec}deg)`;
                minHand.style.transform = minDegrees;
                 const hourDegrees=`rotate(${90+(360/12)*hour+(hour%12)+6*5/60*min}deg)`;
                hourHand.style.transform = hourDegrees;
            }
            //多次
            setInterval(getTime, 1000);
            getTime();
            //clearInterval

            //setTimeout
            //clearInterval

            //requestAnimationFrame

        })()
    </script>
</body>

</html>